<template>
  <div class="container">
    <div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
        <el-button size="small" type="success" @click="createSubmit('dataForm')">更新</el-button>
      </div>
      <div>
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="文档名称" prop="name">
                <el-input v-model="record.name" placeholder="文档名称" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="文档标题" prop="title">
                <el-input v-model="record.title" placeholder="文档标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文档分类" prop="libraryCategoryName">
                <el-input v-model="record.libraryCategoryName" placeholder="文档分类" readonly="true" @click.native="toSelectCategory"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="文档标签" prop="keyword">
                <el-input v-model="record.keyword" placeholder="文档标签"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="文档简介" prop="description">
                <el-input type="textarea"  v-model="record.description" placeholder="文档简介"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-dialog title="文档分类选择" :visible.sync="dialogSelectCategory" top="60px" custom-class="myDialog">
      <library-category-select @setLibraryCategory="setLibraryCategory"></library-category-select>
    </el-dialog>
  </div>
</template>
<script>
  import { libraryCategorySelect } from '@/views/LibraryManage/LibraryDocInfo/components'
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      return {
        queryArgs: {
          condition: []
        },
        record: {
          id: '',
          name: '',
          libraryCategoryId: '',
          libraryCategoryName: '',
          title: '',
          keyword: '',
          description: ''
        },
        recordRules: {
          libraryCategoryName: [
            { message: '文档分类不能为空', required: true, trigger: 'blur' }
          ],
          title: [
            { message: '文档标题不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '最大长度为 128 个字符', trigger: 'blur' }
          ],
          keyword: [
            { min: 0, max: 256, message: '最大长度为 256 个字符', trigger: 'blur' }
          ],
          description: [
            { min: 0, max: 1024, message: '最大长度为 1024 个字符', trigger: 'blur' }
          ]
        },
        dialogSelectCategory: false
      }
    },
    created() {
      this.fetchData()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      // '$route.name': ['GetCodeList', 'GetCodeList1']
    },
    components: {
      libraryCategorySelect
    },
    methods: {
      buildQueryConditions() {
        let tempQueryCondition = []

        // 主键
        const queryId = {
          property: 'id',
          value: this.$route.params.id,
          type: 'EQ'
        }
        tempQueryCondition.push(queryId)

        return tempQueryCondition
      },
      fetchData() { // 获取内容
        this.queryArgs.condition = this.buildQueryConditions()
        this.$store
          .dispatch('LibraryDocQueryMyDoc', this.queryArgs)
          .then(res => {
            if (res.success) {
              let data = res.data.records[0];
              if (data) {
                this.record.id = data.id
                this.record.name = data.name
                this.record.libraryCategoryId = data.libraryCategoryId
                this.record.libraryCategoryName = data.libraryCategoryName
                this.record.title = data.title
                this.record.keyword = data.keyword
                this.record.description = data.description
              }
            } else {
              this.$message({
                type: 'error',
                message: '查询文档详细异常!' + res.message
              })
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: '查询文档详细异常!'
            })
          })
      },
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRecord()
          } else {
            this.$message({
              type: 'error',
              message: '更新失败!'
            })
          }
        })
      },
      cancelSubmit() {
        this.$router.push({
          name: 'libraryDocMyDoc'
        })
      },
      toSelectCategory() {
        //
        this.dialogSelectCategory = true
      },
      setLibraryCategory(args) {
        this.dialogSelectCategory = false
        if (args) {
          this.record.libraryCategoryId = args.id
          this.record.libraryCategoryName = args.name
        }
      },
      saveRecord() {
        console.log('record', this.record)
        this.$store.dispatch('LibraryDocUpdateDocById', this.record).then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            this.$router.push({
              name: 'libraryDocMyDoc',
              params: {}
            })
          } else {
            this.$message({
              type: 'error',
              message: '更新失败!' + res.message
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
